<template>
	<div v-if="indexShow">
		<a-card :bordered="false" style="margin-bottom: 10px">
			<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
				<a-row :gutter="24">
					<a-col :span="8">
						<a-form-item name="tableName" label="表格名称">
							<a-input v-model:value="searchFormState.tableName" placeholder="请输入表格名称" />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-button type="primary" @click="tableRef.refresh(true)">
							<template #icon><SearchOutlined /></template>
							查询
						</a-button>
						<a-button class="leisure-buttom-left" @click="reset">
							<template #icon><redo-outlined /></template>
							重置
						</a-button>
					</a-col>
				</a-row>
			</a-form>
		</a-card>
		<a-card :bordered="false">
			<s-table
				ref="tableRef"
				:columns="columns"
				:data="loadData"
				:expand-row-by-click="true"
				:alert="options.alert.show"
				bordered
				:row-key="(record) => record.id"
				:row-selection="options.rowSelection"
			>
				<template #operator class="table-operator">
					<a-space>
						<xn-batch-delete :selectedRowKeys="selectedRowKeys" @batchDelete="deleteBatchFile" />
					</a-space>
				</template>
				<template #bodyCell="{ column, record }">
					<template v-if="column.dataIndex === 'sync'">
						<a-switch
							:loading="syncLoading"
							checked-children="开启"
							un-checked-children="关闭"
							:checked="record.sync === 'Y'"
							@change="onSync(record)"
						/>
					</template>
					<template v-if="column.dataIndex === 'hide'">
						<a-switch
							:loading="hideLoading"
							checked-children="展示"
							un-checked-children="隐藏"
							:checked="record.hide === 'Y'"
							@change="onHide(record)"
						/>
					</template>
					<template v-if="column.dataIndex === 'monitor'">
						<a-tag v-if="record.createMonitor === 'Y'" color="success">创建</a-tag>
						<a-tag v-else color="default">创建</a-tag>
						<a-tag v-if="record.updateMonitor === 'Y'" color="processing">修改</a-tag>
						<a-tag v-else color="default">修改</a-tag>
						<a-tag v-if="record.deleteMonitor === 'Y'" color="error">删除</a-tag>
						<a-tag v-else color="default">删除</a-tag>
					</template>
					<template v-if="column.dataIndex === 'action'">
						<a v-if="record.sync === 'Y'" @click="syncField(record)">同步字段</a>
						<a-divider v-if="record.sync === 'Y'" type="vertical" />
						<a v-if="record.sync === 'Y'" @click="syncData(record)">同步数据</a>
						<a-divider v-if="record.sync === 'Y'" type="vertical" />
						<a @click="showMonitorModel(record)">监听管理</a>
					</template>
				</template>
			</s-table>
		</a-card>
		<a-modal v-model:visible="showMonitorVisible" title="订阅管理" @ok="onMonitor()">
			<div>
				<a-checkbox v-model:checked="checkAll" :indeterminate="indeterminate" @change="onCheckAllChange">
					全选
				</a-checkbox>
			</div>
			<a-divider />
			<a-checkbox-group v-model:value="checkedList">
				<a-checkbox value="create">创建</a-checkbox>
				<a-checkbox value="update">更新</a-checkbox>
				<a-checkbox value="delete">删除</a-checkbox>
			</a-checkbox-group>
		</a-modal>
	</div>
</template>

<script setup name="TableInfo">
import TableApi from '@/api/info/TableApi'
import tool from '@/utils/tool'
import { message } from 'ant-design-vue'
import TableField from './TableField.vue'

const syncLoading = ref(false)
const hideLoading = ref(false)
const showMonitorVisible = ref(false)
const record = ref({})
// 定义tableDOM
const tableRef = ref()
const searchFormRef = ref()
const searchFormState = ref({})
const indexShow = ref(true)
const checkAll = ref(false)
const indeterminate = ref(false)

const checkedList = ref([])

const tableFieldRef = ref()
const columns = [
	{
		title: '表名称',
		dataIndex: 'name',
		width: 120
	},
	{
		title: '表id',
		dataIndex: 'tableId',
		ellipsis: true,
		width: 140
	},
	{
		title: '所属空间',
		dataIndex: 'spaceId',
		ellipsis: true,
		width: 140
	},
	{
		title: '是否同步数据',
		dataIndex: 'sync',
		width: 100
	},
	{
		title: '是否展示',
		dataIndex: 'hide',
		width: 100
	},
	{
		title: '监听状态',
		dataIndex: 'monitor',
		width: 160
	},
	{
		title: '操作',
		dataIndex: 'action',
		align: 'left',
		width: 200
	}
]
const selectedRowKeys = ref([])
// 列表选择配置
const options = {
	alert: {
		show: false,
		clear: () => {
			selectedRowKeys.value = ref([])
		}
	},
	rowSelection: {
		onChange: (selectedRowKey, selectedRows) => {
			selectedRowKeys.value = selectedRowKey
		}
	}
}
// 表格查询 返回 Promise 对象
const loadData = (parameter) => {
	return TableApi.page(Object.assign(parameter, searchFormState.value)).then((data) => {
		return data
	})
}
// 重置
const reset = () => {
	searchFormRef.value.resetFields()
	tableRef.value.refresh(true)
}
// 同步Z
const syncField = (record) => {
	TableApi.syncField(record)
		.then(() => {
			tableRef.value.refresh(true)
			message.info('同步成功')
		})
		.finally(() => {
			syncLoading.value = false
		})
}
// 同步数据
const syncData = (record) => {
	TableApi.syncData(record)
		.then(() => {
			tableRef.value.refresh(true)
		})
		.finally(() => {
			syncLoading.value = false
		})
}
// 开启同步
const onSync = (record) => {
	syncLoading.value = true
	const params = {
		id: record.id
	}
	if (record.sync == 'N') {
		params.sync = 'Y'
	} else {
		params.sync = 'N'
	}

	TableApi.manageSync(params)
		.then(() => {
			tableRef.value.refresh(true)
		})
		.finally(() => {
			syncLoading.value = false
		})
}
// 开启同步
const onHide = (record) => {
	hideLoading.value = true
	const params = {
		id: record.id
	}
	if (record.hide == 'N') {
		params.hide = 'Y'
	} else {
		params.hide = 'N'
	}

	TableApi.hide(params)
		.then(() => {
			tableRef.value.refresh(true)
		})
		.finally(() => {
			hideLoading.value = false
		})
}
// 开启同步
const onMonitor = () => {
	const params = {
		id: record.value.id,
		createMonitor: checkedList.value.includes('create') ? 'Y' : 'N',
		updateMonitor: checkedList.value.includes('update') ? 'Y' : 'N',
		deleteMonitor: checkedList.value.includes('delete') ? 'Y' : 'N'
	}
	console.log(params)

	TableApi.monitor(params)
		.then(() => {
			tableRef.value.refresh(true)
			showMonitorVisible.value = false
		})
		.finally(() => {
			showMonitorVisible.value = false
		})
}
// 同步数据
const showMonitorModel = (item) => {
	record.value = item
	showMonitorVisible.value = true
}
const onCheckAllChange = (e) => {
	console.log(e)
	indeterminate.value = false

	Object.assign(checkedList.value, e.target.checked ? ['create', 'update', 'delete'] : [])
}
// 删除
const deleteFile = (record) => {
	let params = [
		{
			id: record.id
		}
	]
	fileApi.fileDelete(params).then(() => {
		tableRef.value.refresh(true)
	})
}
// 批量删除
const deleteBatchFile = (params) => {
	fileApi.fileDelete(params).then(() => {
		tableRef.value.clearRefreshSelected()
	})
}
</script>

<style scoped>
.record-img {
	width: 40px;
	height: 40px;
}
.ant-form-item {
	margin-bottom: 0 !important;
}
</style>
